<template>
	<view class="msgBox">
		<view class="msgList flex-row" @click="goList"  v-if="datalist.length">
			<view class="avatar"><image src='../../static/icon/icon_msg_zs.png'></image><text class="nums">{{datalist.length}}</text></view>
			<view class="flex-col info">
				<view class="flex-row titleBox">
					<view class="title"><text>小助手</text><text class='guanfang'>官方</text></view>
					<view class="time">{{datalist[0].addTime}}</view>
				</view>
				<view class="content text-ellipsis">{{datalist[0].content}}</view>
			</view>
		</view>
		<view class="msgList flex-row" v-if="isService == true" @click="gomsg(userid)">
			<view class="avatar"><image src='../../static/kf.png'></image></view>
			<view class="flex-col info">
				<view class="flex-row titleBox">
					<view class="title"><text>客服</text><text class='guanfang'>官方</text></view>
					
				</view>
				<view class="content text-ellipsis">欢迎咨询</view>
			</view>
		</view>
		<view class="msgList flex-row" @click="gomsg(3)">
			<view class="avatar"><image src='../../static/kf.png'></image></view>
			<view class="flex-col info">
				<view class="flex-row titleBox">
					<view class="title"><text>测试</text><text class='guanfang'>官方</text></view>
					
				</view>
				<view class="content text-ellipsis">欢迎咨询</view>
			</view>
		</view>
		<view class="textCenter paddingtb20"  v-if="datalist==''">
			暂无消息
		</view>
	</view>
</template>

<script>
	import RongIMLib from '../../common/RongIMLib-3.0.6.2-dev.js'
	import Sha1 from '../../common/sha1.min.js'
	import store from '../../store/index.js'
	var _self;
	var navi = null
	
	var config = {}
	if (navi) {
		config.navi = navi
	}
	export default{
		data(){
			return{
				datalist:[],
				token: '',
				im:{},
				isService:Boolean,
				userid:''
			}
		},
		onShow() {
			
			this.getmsglist()
			// this.getToken()
			this.getInfo()
		},
		onLoad() {
			// this.im = store.state.im
			// console.log(this.im)
			// this.im.Conversation.getList().then(function(conversationList) {
			//   console.log('获取会话列表成功', conversationList);
			//   store.state.msgList = im
			// });
			// this.getToken()
			this.userid = uni.getStorageSync('userId')
		},
		
		methods:{
			//根据用户获取是否是客服
			getInfo(){
				let id = uni.getStorageSync('userId')
				this.$http.get('/userCenter/getUserInfoById', {id:id}).then(res => {
					if (res.code == '0') {
						this.isService = res.data.isService
					
					}
				})
			},
			// 是客服进入聊天
			gomsg(id){
				console.log(id)
				uni.navigateTo({
					url:'../message/webmsg?id='+id
				})
			},
			//获取聊天列表
			getmsglist(){
				let id = uni.getStorageSync('userId')
			
				this.$http.get('/message/getMessageList').then(res => {
					if (res.code == '0') {
						this.datalist = res.data
						
					}else{
						uni.showToast({
							icon:"none",
							title:res.msg
						})
					}
				})
			},
			goList(){
				uni.navigateTo({
					url:'/pages/message/messageList'
				})
			},
			
			//模拟服务器端获取token
			getToken() {
				let that = this
				var conversationList = []; // 当前已存在的会话列表
				that.im.watch({
					conversation: function(event) {
						console.log(event)
						var updatedConversationList = event.updatedConversationList; // 更新的会话列表
						console.log('更新会话汇总:', updatedConversationList);
						
						console.log('最新会话列表:', that.im.Conversation.merge({
							conversationList,
							updatedConversationList
						}));
					},
					message: function(event) {
						var message = event.message;
						console.log('收到新消息:', message);
					
					},
					status: function(event) {
						var status = event.status;
						console.log('连接状态码:', status);
						
						
					}
				});
				
			},
			
			
			
			
			
			
		
		
			
		}
	}
</script>

<style scoped lang="scss">
	html{
		background-color: #fff;
	}
	.msgBox{
		background-color: #fff;
		padding: 0 30upx;
		.msgList{
			align-items: center;
			padding: 30upx 0;
			border-bottom: 1upx solid rgba(238,238,238,1);
			.avatar{
				width: 88upx;
				height: 88upx;
				padding-right: 24upx;
				position: relative;
				>image{
					width: 88upx;
					height: 88upx;
				}
				.nums{
					position: absolute;
					width: 30upx;
					height: 30upx;
					background: #FF2727;
					border-radius: 50%;
					color: #fff;
					font-size: 22upx;
					text-align: center;
					line-height: 30upx;
					top: 0;
					right: 20upx;
				}
			}
		}
		.info{
			width: 580upx;
			.titleBox{
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30upx;
				.title{
					color: #333338;
					font-size: 30upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.guanfang{
						margin-left: 13upx;
						display: block;
						// width: 57upx;
						height: 31upx;
						text-align: center;
						line-height: 31upx;
						font-size: 18upx;
						color: #fff;
						background: url(../../static/icon/img_msg_tip_bg.png) no-repeat left top;
						background-size: 100% 100%;
						padding: 0 10upx;
					}
				}
				.time{
					color: #999999;
					font-size: 22upx;
				}
			}
			.content{
				color: #666666;
				font-size: 26upx;
			}
		}
	}
</style>
